<template>
  <el-card>
    <el-form :inline="true">
      <el-form-item label="物品名称：">
        <el-input placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="物业人员名称:">
        <el-input placeholder="请输入物业人员" />
      </el-form-item>
      <el-form-item label="审核状态:">
        <el-select placeholder="请选择">
          <el-option label="文本类型" value="shanghai" />
          <el-option label="链接类型" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属小区:">
        <el-select placeholder="请选择">
          <el-option label="文本类型" value="shanghai" />
          <el-option label="链接类型" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-row>
      <el-button type="info">搜索</el-button>
      <el-button type="primary" @click="btnadd">新增采购记录</el-button>
      <el-button type="danger">批量删除</el-button>
      <el-button type="success">导出</el-button>
    </el-row>
    <!-- 表格 -->
    <el-table border class="table-item">
      <!-- 复选框 -->
      <el-table-column
        type="selection"
        width="55"
      />
      <!--  -->
      <el-table-column
        label="社区名"
      />
      <el-table-column
        label="采购人员"
      />
      <el-table-column
        label="物品名称"
      />
      <el-table-column
        label="采购单价"
      />
      <el-table-column
        label="采购数量"
      />
      <el-table-column
        label="其他价格(打车,住宿，吃饭等)"
      />
      <el-table-column
        label="状态"
      >

        <el-button type="success">已同意</el-button>

      </el-table-column>
      <el-table-column
        label="备注"
      />

    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="el-page"
      :current-page="page.page"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.tatal"
    />
    <!-- 弹层 -->
    <addpurchase :showdialog="showdialog" />
  </el-card>
</template>
<script>
import addpurchase from './compotnent/addpurchase.vue'
export default {
  components: {
    addpurchase
  },
  data() {
    return {
      page: {
        page: 1, // 当前页码
        size: 10,
        total: 0 // 总数
      },
      showdialog: false// 控制弹层的显示隐藏
    }
  },
  methods: {
    btnadd() {
      this.showdialog = true
    }
  }

}
</script>
<style scoped>
.box-card{
  margin: 20px 20px;
}
.el-page{
  float: right;
   margin: 20px 0;
}
.table-item{
   margin-top: 40px;
}

</style>
